<template>
  <div id="testMap" style="height:500px;width:800px;border:1px solid black;">
      
  </div>
  
</template>

<script>
    require('echarts/map/js/province/anhui')
    var geoCoordMap = { //为了保证饼图不互相重叠，我对经纬坐标进行了调整
            '上海':  [121.472644,31.231706],
            '云南':  [102.712251,24.040609],
            '内蒙古':  [111.670801,40.818311],
            '北京':  [116.405285,39.904989],
            // '台湾': [121.509062, 25.044332],
            '吉林':  [125.3245,43.886841],
            '四川':  [103.065735,30.659462],
            '天津':  [119.190182,39.125596],
            '宁夏':  [106.278179,38.46637],
            '安徽':  [117.283042,31.86119],
            '山东':  [118.000923,36.675807],
            '山西':  [112.049248,37.057014],
            '广东':  [113.280637,23.125178],
            '广西':  [108.310004,22.82402],
            '新疆':  [87.617733,43.792818],
            '江苏':  [119.467413,  33.741544],
            '江西':  [115.892151,  28.676493],
            '河北':  [114.802461,  37.745474],
            '河南':  [113.665412,  33.757975],
            '浙江':  [120.153576,  29.287459],
            '海南':  [110.33119,  20.031971],
            '湖北':  [113.298572,  30.984355],
            '湖南':  [112.12279,  28.19409],
            // '澳门': [113.54909, 22.198951],
            '甘肃':  [103.823557,  36.058039],
            '福建':  [119.306239,  26.075302],
            '西藏':  [91.132212,  29.660361],
            '贵州':  [106.713478,  26.578343],
            '辽宁':  [123.029096,  41.396767],
            '重庆':  [106.504962,  29.933155],
            '陕西':  [108.948024,  34.263161],
            '青海':  [100.578916,  36.623178],
            // '香港': [114.173355, 22.310048],
            '黑龙江':  [126.642464,  46.756967],
        };
    
    var data = [
        {name: '北京',value: Math.round(Math.random()*100)},
        {name: '天津',value: Math.round(Math.random()*100)},
        {name: '上海',value: Math.round(Math.random()*100)},
        {name: '重庆',value: Math.round(Math.random()*100)},
        {name: '河北',value: Math.round(Math.random()*100)},
        {name: '河南',value: Math.round(Math.random()*100)},
        {name: '云南',value: Math.round(Math.random()*100)},
        {name: '辽宁',value: Math.round(Math.random()*100)},
        {name: '黑龙江',value: Math.round(Math.random()*100)},
        {name: '湖南',value: Math.round(Math.random()*100)},
        {name: '安徽',value: Math.round(Math.random()*100)},
        {name: '山东',value: Math.round(Math.random()*100)},
        {name: '新疆',value: Math.round(Math.random()*100)},
        {name: '江苏',value: Math.round(Math.random()*100)},
        {name: '浙江',value: Math.round(Math.random()*100)},
        {name: '江西',value: Math.round(Math.random()*100)},
        {name: '湖北',value: Math.round(Math.random()*100)},
        {name: '广西',value: Math.round(Math.random()*100)},
        {name: '甘肃',value: Math.round(Math.random()*100)},
        {name: '山西',value: Math.round(Math.random()*100)},
        {name: '内蒙古',value: Math.round(Math.random()*100)},
        {name: '陕西',value: Math.round(Math.random()*100)},
        {name: '吉林',value: Math.round(Math.random()*100)},
        {name: '福建',value: Math.round(Math.random()*100)},
        {name: '贵州',value: Math.round(Math.random()*100)},
        {name: '广东',value: Math.round(Math.random()*100)},
        {name: '青海',value: Math.round(Math.random()*100)},
        {name: '西藏',value: Math.round(Math.random()*100)},
        {name: '四川',value: Math.round(Math.random()*500)},
        {name: '宁夏',value: Math.round(Math.random()*500)},
        {name: '海南',value: Math.round(Math.random()*500)},
        {name: '台湾',value: Math.round(Math.random()*500)},
        {name: '香港',value: Math.round(Math.random()*500)},
        {name: '澳门',value: Math.round(Math.random()*500)}
    ];

    export default {
        name: 'echartsMap',
            data () {
                return {
                    msg: '',
                }
            },
        mounted(){
            setTimeout(() => {
                this.drawProvinceMap();
            }, 1000);
            

        },

        methods: {
            convertData(data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value),
                        });
                    }
                }
                console.log(res);
                return res;
            },
                
            drawProvinceMap(){
                let that = this;
               var mapdata = [ //为了保证饼图不互相重叠，我对经纬坐标进行了调整
                {name:"上海",value:[121.472644,31.231706,Math.round(Math.random()*100)]},
                {name:"云南",value:[102.712251,24.040609,Math.round(Math.random()*200)]},
                {name:"内蒙古",value:[111.670801,40.818311,Math.round(Math.random()*100)]},
                {name:"北京",value:[116.405285,39.904989,Math.round(Math.random()*100)]},
                // {name:"台湾",value:[121.509062, 25.044332,Math.round(Math.random()*100)]},
                {name:"吉林",value:[125.3245,43.886841,Math.round(Math.random()*100)]},
                {name:"四川",value:[103.065735,30.659462,Math.round(Math.random()*200)]},
                {name:"天津",value:[119.190182,39.125596,Math.round(Math.random()*100)]},
                {name:"宁夏",value:[106.278179,38.46637,Math.round(Math.random()*100)]},
                {name:"安徽",value:[117.283042,31.86119,Math.round(Math.random()*100)]},
                {name:"山东",value:[118.000923,36.675807,Math.round(Math.random()*100)]},
                {name:"山西",value:[112.049248,37.057014,Math.round(Math.random()*100)]},
                {name:"广东",value:[113.280637,23.125178,Math.round(Math.random()*100)]},
                {name:"广西",value:[108.310004,22.82402,Math.round(Math.random()*100)]},
                {name:"新疆",value:[87.617733,43.792818,Math.round(Math.random()*100)]},
                {name:"江苏",value:[119.467413,33.741544,Math.round(Math.random()*100)]},
                {name:"江西",value:[115.892151,28.676493,Math.round(Math.random()*200)]},
                {name:"河北",value:[114.802461,37.745474,Math.round(Math.random()*100)]},
                {name:"河南",value:[113.665412,33.757975,Math.round(Math.random()*100)]},
                {name:"浙江",value:[120.153576,29.287459,Math.round(Math.random()*100)]},
                {name:"海南",value:[110.33119,20.031971,Math.round(Math.random()*200)]},
                {name:"湖北",value:[113.298572,30.984355,Math.round(Math.random()*100)]},
                {name:"湖南",value:[112.12279,28.19409,Math.round(Math.random()*100)]},
                // {name:"澳门",value:[113.54909, 22.198951,Math.round(Math.random()*100)]},
                {name:"甘肃",value:[103.823557,36.058039,Math.round(Math.random()*100)]},
                {name:"福建",value:[119.306239,26.075302,Math.round(Math.random()*200)]},
                {name:"西藏",value:[91.132212,29.660361,Math.round(Math.random()*100)]},
                {name:"贵州",value:[106.713478,26.578343,Math.round(Math.random()*100)]},
                {name:"辽宁",value:[123.029096,41.396767,Math.round(Math.random()*100)]},
                {name:"重庆",value:[106.504962,29.933155,Math.round(Math.random()*100)]},
                {name:"陕西",value:[108.948024,34.263161,Math.round(Math.random()*100)]},
                {name:"青海",value:[100.578916,36.623178,Math.round(Math.random()*100)]},
                // {name:"香港",value:[114.173355, 22.310048,Math.round(Math.random()*100)]},
                {name:"黑龙江",value:[126.642464,46.756967,Math.round(Math.random()*100)]},];
            // console.log(this.convertMapDta(data))
                
                var myChartMap = that.$echarts.init(document.getElementById('testMap'));

                myChartMap.setOption({
                
                title: {
                    text: name,
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        // if (params.value) {
                        //     return params.name + "<br/>" + "GDP: " + params.value + "亿元";
                        // }
                    }
                },
                visualMap: {
                    
                    show: true,
                    min: 0,
                    max: 200,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'], // 文本，默认为数值文本
                    calculable: true,
                    seriesIndex: [0],
                    inRange: {
                        // color: ['#3B5077', '#031525'] // 蓝黑
                        // color: ['#ffc0cb', '#800080'] // 红紫
                        // color: ['#3C3B3F', '#605C3C'] // 黑绿
                        // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
                        // color: ['#23074d', '#cc5333'] // 紫红
                        //color: ['#00467F', '#A5CC82'] // 蓝绿
                        // color: ['#1488CC', '#2B32B2'] // 浅蓝
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                        color: ['white', 'red'] // 蓝绿

                    }
                },
                geo: {
                            show: true,
                            map: 'china',
                            label: {
                                normal: {
                                     formatter: '{b}',
                                    show: true
                                },
                                emphasis: {
                                    show: true,
                                }
                            },
                            roam: false,
                            itemStyle: {
                                normal: {
                                    areaColor: '#031525',
                                    borderColor: '#3B5077',
                                },
                                emphasis: {
                                    areaColor: '#fff',
                                }
                            }
                        },
                series: [
                    
                    // {
                    //     name: 'chinaMap',
                    //     type: 'map',
                    //     mapType: 'china',
                    //     roam: true,

                    //     label: {
                    //         normal: {
                    //         show: true,
                    //     },
                    //     emphasis: {
                    //         show: true
                    //         }
                    //     },
                    //     animation: false,
                    //     data: this.convertMapDta(data),
                    //     zlevel: 3
                    // }
                    {
                        type: 'map',
                        map: 'china',
                        geoIndex: 0,
                        aspectScale: 0.75, //长宽比
                        showLegendSymbol: false, // 存在legend时显示
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true,
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                // areaColor: '#031525',
                                // borderColor: '#fff',
                                show : true
                            },
                            emphasis: {
                                //areaColor: '#2B91B7'
                                show : true
                            }
                        },
                        animation: false,
                        data: data
                    },
                    {
                        name: '点',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: 'pin', //气泡
                        symbolSize: 40,
                        encode: {label: 2},//控制气泡图显示的值对应的的是data数据里面的第几列，索引从0开始。
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 9,
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#F62157', //标志颜色
                            }
                        },
                        zlevel: 6,
                        //data: this.convertData(data),
                        data:mapdata
                    },
                    
                ]  
            });   
            myChartMap.on('click', function (params) {

                var provinceName = params.data.name;
                
              //that.$router.push(comp.path,comp.components);
              that.$router.push({
                path:'/echartsChina/province',
                components:'views/echartsChina/province/index',
                query:{
                  'id':provinceName,
                }
              });
            });
        },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 @import '../../styles/province.scss';
</style>